| 今回は「メニューを1つの画像ファイルで作る」テクニックを紹介します。 メニューのボタンは、ふつうメニューの数だけ作って、それぞれにリンクをはります。しかし、表示を軽くすることを考えた場合にはどうでしょう？ 10KBのボタンを10個表示するのと、100KBの画像を1つ読み込むのとでは、どちらが早いと思いますか？ 答えは1つの画像です。 ファイルサイズとしては同じですが、サーバーとのやりとりやブラウザの処理にかかる時間に差が生じてくるからです。 あまり大きな画像になると、回線の太さや動作環境によっては負担になるので注意が必要ですが、1つの画像ファイルに複数のリンクを設定する「クリッカブルマップ」は応用がきくので、この機会にぜひ覚えておきましょう。  |
 |
 |
|
| まずは、右図のようにメニューを1つの画像で作ります。このとき、画像の余白とページの背景を同じ色にすることが基本です。背景に壁紙を使う場合は、色調や柄との相性をチェックすることを忘れずに。 |
 |
|
|
 |
|
| 次に画像を読み込む<IMG>タグに、USEMAP属性としてマップ名をシャープ「＃」に続けて指定します。マップ名は半角の英数字で、同じHTML内のNAME属性やID属性で使っていない名前をつけます。 <IMG SRC="images/menu.gif" width="140" height="170" border="0" USEMAP="#MENU1"> |
||
|
 |
|
| <IMG>タグにUSEMAP属性を指定したら、<MAP>タグを使ってクリッカブルマップを定義します。ここでは、領域の形状、座標、リンク先、代替テキストを記述します。 <IMG SRC="images/menu.gif" width="140" height="170" border="0" USEMAP="#MENU1"> <MAP NAME="MENU1"> <AREA SHAPE="領域の形状" COORDS="座標" HREF="リンク先" ALT="代替テキスト"> </MAP> |
||
|
 |
|
| 領域の形状と座標の記述は、下のように行ないます。領域の形状はSHAPE属性、座標はCOORDS属性に記述します。座標は画像領域の左上を基点としたピクセル数で表わし、カンマ「,」で区切って記述します。 |
 |
|
それでは、また次回をお楽しみに！